flex + overflow scroll 일 때 부모가 같이 커지면(min-h-0)

TL;DR

Flex 컨테이너 안에서 overflow: scroll이 먹지 않고 부모까지 같이 커지는 문제는
flex 아이템의 기본값인 min-height: auto 때문이며,
min-height을 명시적으로 주면 해결된다.

문제 상황

다음과 같은 레이아웃에서 문제가 발생했다.

• 부모 컨테이너는 flex 레이아웃
• 특정 영역은 flex-1로 남은 공간을 차지
• 그 안에 height: 100% + overflow: auto인 스크롤 영역이 있음

의도한 동작은:

• 콘텐츠가 늘어나면 해당 영역 안에서 스크롤이 생기는 것

하지만 실제로는:

• 스크롤이 생기지 않고
• 부모 컨테이너 높이까지 같이 늘어나는 현상이 발생했다

원인: flex 아이템의 기본

Flex 아이템은 기본적으로 다음 값을 가짐

min-height: auto;

이는 flex 아이템이 내용보다 작아질 수 없게 하고 스크롤말고 레이아웃 단계에서 크기가 정해져버림

해결:

따라서

<div class="flex-1 min-h-0 overflow-auto">
  ...
</div>

다음과 같이 min-height를 지정해두면 내용 때문이 아니라 정해진 공간에서 줄어들게 할 수 있음